使用Fetch API和Promise来调用Restful接口进行POST

Basic Concept

Promise

Overview

• Promise is a js standard built-in object.

• Promise is used for asynchronous computations.

• A Promise represents a value which may be available now, or in the future, or never.

• A Promise is in one of these states:

  • pending: initial state, not fulfilled or rejected.

  • fulfilled: meaning that the operation completed successfully.

  • rejected: meaning that the operation failed.

• As the Promise.prototype.then() and Promise.prototype.catch() methods return promises, they can be chained.

Definition

Syntax

new Promise( /* executor */ function(resolve, reject) { ... });

Parameters

• executor

  • A function normally initiates some asynchronous work, and then, once that completes, either calls the resolve function to resolve the promise or else reject it if an error occurred.

  • If an error is thrown in the executor function, the promise is rejected. The return value of the executor is ignored.

  • Because the work is an asynchronous work, you may use XHR or Fetch in it.

Methods

• reject(reason) - return a promise with the given reason.

• resolve(value) - return a promise that is resolved with the given value. The value maybe a promise too, if it is, chain the result with then method again.

Prototype Methods

• prototype.catch(onRejected) - onRejected is a callback function to handle the situation that is on rejected.

• prototype.then(onFulfilled, onRejected) - OnRejected is as the below catch method. OnFulfilled is a callback function to handle the situation that is on fulfilled.

FormData

Overview

• The FormData interface provides a way to easily construct a set of key/value pairs representing from fields and their values, which can then be easily sent using asynchronous way(XHR or Fetch).

• It uses the same format a form would use if the encoding type were set to "multipart/form-data".

Definition

Constructor

• FormData()
  Create a new FormData object.

Methods

• append()

• delete()

• entries()

• get()

• getAll()

• has()

• keys()

• set()

• values()

Fetch API

Overview

• The Fetch API provides an interface for fetching resources(including across the network).

• It will seem familiar to anyone who has used XHR, but the new API provides a more powerful and flexible feature set.

Definition

Interfaces

• GlobalFetch

  • fetch()

• Headers

• Request

  • implement Body

• Response

  • implement Body

Mixin

• Body

  • json()
    Takes a Response stream and reads it to completion.It returns a promise that resolves with a JSON object.(读取并处理fetch返回的Response，得出一个json Object化的response。这个处理是异步处理，所以返回是一个Promise.另外fetch本身是个异步操作，得到的Response自然也是一个Promise。)

Restful API Design

• 使用POST创建一个资源，往往需要认证，需要把认证token放在request的header里，把创建数据放到request的body里，发过去。token要放到header的'Authorization' field里，并且前面要加'Bearer '类型标示。创建数据往往放到FormData里，再把formData放倒body里。

• 如果返回的结果是json格式的数据，还需把header里的'Accept' field的值写成'application/json'.

WorkFlow

1. Get token from localStorage to post a image by fetch API.(assume the token is there.)

2. Get the remote url of the image in response.

3. Show image.

Demo

https://jsfiddle.net/clemTheD...

Reference

Promise
Fetch
FormData